<!-- Dom页面 -->
<template>
  <div id="UserIndex">
    <!-- 查询条件行 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="保鲜仓名称" v-model="queryWHForm.whName" clearable>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-button  type="primary" plain icon="el-icon-search" @click="toQueryWH()">查询</el-button>
        <el-button  type="warning" plain icon="el-icon-refresh" @click="cleanQeury()">清空</el-button>
      </el-col>
    </el-row>
    <!-- 操作行 -->
    <el-row style="margin-top:10px;">
      <el-col :span="24">
        <el-button @click="overBacth()" type="danger" plain icon="el-icon-circle-close">批量结束</el-button>
      </el-col>
    </el-row>
    <!-- 表格行 -->
    <el-row style="margin-top:10px">
      <el-col :span="24">
        <el-table :data="warehouses" style="width: 100% " height="400px" border>
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="whName" label="保鲜仓名称" width="180"></el-table-column>
          <el-table-column prop="whAddress" label="地址" width="220"></el-table-column>
          <el-table-column prop="whArea" label="占地面积(亩)" width="120"></el-table-column>
          <el-table-column prop="temperature" label="温度(℃)" width="120"></el-table-column>
          <el-table-column prop="humidty" label="湿度(RH)" width="120"></el-table-column>
          <el-table-column prop="updateTime" label="上次修改时间" width="200"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="toShowDetail(scope.row)" title="查看详情" plain icon="el-icon-search" size="mini"></el-button>
              <el-button @click="toShowOutvound(scope.row)" title="查看出库记录" plain icon="el-icon-s-grid" size="mini" type="success"></el-button>
              <el-button @click="updateTarget(scope.row)" title="指标设置" plain icon="el-icon-setting" size="mini" type="primary"></el-button>
              <el-button @click="overOne()" title="结束使用" plain icon="el-icon-circle-close" size="mini" type="danger"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页显示行 -->
    <el-row style="margin-top:10px">
      <el-col :span="24">
        <el-pagination
          :page-sizes="[10, 30, 60, 100]"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 修改保鲜仓指标弹出框 -->
    <el-dialog
      title="修改指标"
      :visible.sync="dialog.showUpdateForm"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="30%">
      <el-form ref="updateTargetForm" label-width="80px">
        <el-form-item label="调节温度" prop="temperature">
          <el-input-number v-model="updateTargetFormData.temperature" :precision="2" :step="0.1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="调节湿度" prop="humidty">
          <el-input-number v-model="updateTargetFormData.humidty" :precision="2" :step="0.1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="closeUpdateForm()">关闭</el-button>
          <el-button type="primary" @click="confirmUpdateForm()">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看详情弹出框 -->
  <el-dialog
    :visible.sync="dialog.showDetail"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    title="保鲜仓详情"
    width="50%">
      <el-descriptions title="详情如下" border >
        <template slot="extra">
          <el-button @click="closeShowDetail()" type="primary" size="small">关闭</el-button>
        </template>
      <el-descriptions-item label="保鲜仓编号">{{ showDetailData.whId }}</el-descriptions-item>
      <el-descriptions-item label="保鲜仓名称">{{ showDetailData.whName }}</el-descriptions-item>
      <el-descriptions-item label="保鲜仓地址">{{ showDetailData.whAddress }}</el-descriptions-item>
      <el-descriptions-item label="申请人id">{{ showDetailData.userId }}</el-descriptions-item>
      <el-descriptions-item label="设置温度(℃)">{{ showDetailData.temperature }}</el-descriptions-item>
      <el-descriptions-item label="设置湿度(RH)">{{ showDetailData.humidty }}</el-descriptions-item>
      <el-descriptions-item label="保鲜仓面积(亩)">{{ showDetailData.whArea }}</el-descriptions-item>
      <el-descriptions-item label="保鲜仓地址">{{ showDetailData.whAddress }}</el-descriptions-item>
      <el-descriptions-item label="建立时间">{{ showDetailData.insertTime }}</el-descriptions-item>
      <el-descriptions-item label="上次更新时间">{{ showDetailData.updateTime }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>

  </div>
</template>

<!-- :column="3" -->
<!-- 组件js -->
<script>
export default {
  name: "ManageWarehouse",
  data() {
    return {
      //保鲜仓列表
      warehouses:[
        {whId:"101",whName:"弯塘村属仓",whAddress:"丘北县曰者镇弯塘村",userId:"wang",whArea:1.5,temperature:10.3,humidty:36.2,isUse:0,insertTime:"2022-3-3",updateTime:"2022-3-3"},
        {whId:"102",whName:"龙树村属仓",whAddress:"丘北县曰者镇龙树村",userId:null,whArea:1.5,temperature:6.4,humidty:32.1,isUse:0,insertTime:"2022-3-3",updateTime:"2022-3-3"},
        {whId:"103",whName:"新沟村属仓",whAddress:"丘北县曰者镇新沟村",userId:null,whArea:1.5,temperature:5.5,humidty:35.5,isUse:0,insertTime:"2022-3-3",updateTime:"2022-3-3"}
      ],
      //申请记录列表
      applrecord:[
        {recordId:"1",userId:"wang",whName:"弯塘村属仓",applTime:"2023-2-23",orderState:0,whAddress:"丘北县曰者镇弯塘村"},
        {recordId:"2",userId:"wang",whName:"龙树村属仓",applTime:"2023-2-23",orderState:1,whAddress:"丘北县曰者镇龙树村"},
        {recordId:"3",userId:"wang",whName:"新沟村属仓",applTime:"2023-2-23",orderState:2,whAddress:"丘北县曰者镇新沟村"}
      ],
      //查询保鲜仓表单
      queryWHForm:{
        whName:null
      },
      //弹窗状态
      dialog:{
        showUpdateForm:false,
        showDetail:false
      },
      //申请保鲜仓表单
      addWHForm:{
        whName:null,
      },
      //查看详情弹出数据
      showDetailData:{
        whId:null,
        whName:null,
        whAddress:null,
        userId:null,
        whArea:null,
        temperature:null,
        humidty:null,
        insertTime:null,
        updateTime:null
      },
      //修改指标表单
      updateTargetFormData:{
        temperature:null,
        humidty:null
      }
    };
  },
  methods:{
    //点击查询按钮
    toQueryWH(){
      
    },
    //点击清空按钮
    cleanQeury(){
      this.queryWHForm = {
        whName:null
      }
    },
    //点击批量结束
    overBacth(){
      
    },
    //查看详情按钮
    toShowDetail(item){
      this.showDetailData = item
      this.dialog.showDetail = true
    },
    //关闭查看详情弹窗
    closeShowDetail(){
      this.dialog.showDetail = false
      this.showDetailData = {
        whId:null,
        whName:null,
        whAddress:null,
        userId:null,
        whArea:null,
        temperature:null,
        humidty:null,
        insertTime:null,
        updateTime:null点击
      }
    },
    //点击指标设置按钮
    updateTarget(item){
      this.dialog.showUpdateForm = true
      //从数据库中查询此刻的指标数值回填
      this.updateTargetFormData.temperature = item.temperature
      this.updateTargetFormData.humidty = item.humidty
    },
    //关闭指标设置表单
    closeUpdateForm(){
      this.dialog.showUpdateForm = false
      this.updateTargetFormData = {
        temperature:null,
        humidty:null
      }
    },
    //确认指标设置表单
    confirmUpdateForm(){
      this.dialog.showUpdateForm = false
      //提交表单
      this.updateTargetFormData = {
        temperature:null,
        humidty:null
      }
    },
    //单个结束使用
    overOne(){

    },
    //点击查看出库记录按钮
    toShowOutvound(item){

    }
  },
  mounted(){

  }
};
</script>

<!-- CSS代码 -->
<style scoped></style>
